<template>
  <div class="fr page">
    <div class="sui-pagination clearfix">
      <ul>
        <li class="prev disabled" @click="prePage">
          <a href="javascript:;">«上一页</a>
        </li>
        <li class="dotted" v-if="startEndpages.start > 1" @click="changePage(1)"><span>1</span></li>
        <li class="dotted" v-if="startEndpages.start > 2"><span>...</span></li>
        <template v-for="(item, index) in startEndpages.end">
          <li
          :class="{ active: item == pageNo }"
          :key="index"
          v-if="item>=startEndpages.start"
          @click="changePage(item)"
        >
          <a href="javascript:;">{{ item }}</a>
        </li>
        </template>
        <li class="dotted" v-if="startEndpages.end<totalPages-1"><span>...</span></li>
        <li class="dotted"  v-if="startEndpages.end<=totalPages-1" @click="changePage(totalPages)">
          <span>{{ totalPages }}</span>
        </li>
        <li class="next" @click="nextPage">
          <a href="javascript:;">下一页»</a>
        </li>
        <li>
          <a href="javascript:;">共{{ totalPages }}页</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ["pageNo", "pageSize", "total", "totalPages", "pageNumber"],
  computed: {
    //计算初始页记结束也
    startEndpages(){
      let start=0 , end=0;
      if(this.pageNumber > this.totalPages){
        start=1;
        end=this.totalPages;
      }
      else {
        start=this.pageNo-parseInt(this.pageNumber/2);
        end=this.pageNo+parseInt(this.pageNumber/2);
        if(start<1){
          start=1;
          end=this.pageNumber;
        }
        else if(end>this.totalPages){
          start=this.totalPages-this.pageNumber+1;
          end=this.totalPages;
        }
      }
      return {start,end};
    }
  },
  methods: {
    changePage(item){
      console.log(item);
      this.$emit('changePage',item);
    },
    prePage(){
      if(this.pageNo>1){
        this.$emit('changePage',this.pageNo-1);
      }
    },
    nextPage(){
      if(this.pageNo<this.totalPages){
        this.$emit('changePage',this.pageNo+1);
      }
    }
  },
};
</script>

<style lang="less" scoped>
.page {
  // width: 733px;
  width: 100%;
  text-align: center;
  height: 66px;
  overflow: hidden;
  float: right;

  .sui-pagination {
    margin: 18px 0;
    ul {
      margin-left: 0;
      margin-bottom: 0;
      vertical-align: middle;
      float: left;

      li {
        line-height: 18px;
        display: inline-block;

        a {
          position: relative;
          float: left;
          line-height: 18px;
          text-decoration: none;
          background-color: #fff;
          border: 1px solid #e0e9ee;
          margin-left: -1px;
          font-size: 14px;
          padding: 9px 18px;
          color: #333;
        }

        &.active {
          a {
            background-color: #fff;
            color: #e1251b;
            border-color: #fff;
            cursor: default;
          }
        }

        &.prev {
          a {
            background-color: #fafafa;
          }
        }

        &.disabled {
          a {
            color: #999;
            cursor: default;
          }
        }

        &.dotted {
          span {
            margin-left: -1px;
            position: relative;
            float: left;
            line-height: 18px;
            text-decoration: none;
            background-color: #fff;
            font-size: 14px;
            border: 0;
            padding: 9px 18px;
            color: #333;
          }
        }

        &.next {
          a {
            background-color: #fafafa;
          }
        }
      }
    }

    // div {
    //   color: #333;
    //   font-size: 14px;
    //   float: right;
    //   width: 241px;
    // }
  }
}
</style>